<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.纹理填充</title>
    <style>
        body>* {
            margin-left: 40px;
        }li{
             margin-bottom:  0.5em;
         }
        canvas{
            display: inline-block;
            vertical-align: top;
        }
        ol{
            display: block;
        }
    </style>
</head>
<body>
<h4><a href="http://caibaojian.com/canvas/8.html">图片（纹理）填充</a></h4>
<div>
    <canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
    <img id="img" src="images/111.png" alt=""   style="display: none;" />

</div>
<ol>
    <li>createPattern( 图片对象, 重复方式 )</li>
    <!--<li>createPattern( canvas对象, 重复方式 )</li>-->
    <!--<li>createPattern( 视频对象, 重复方式 )</li>-->
</ol>
<p>tip：填充是按整个画布对齐的</p>
<!--<h5>实例：</h5>-->
<!--<canvas id="canimg"></canvas>-->
<script>

    var candom= document.getElementById('canvas'),
        can2d = candom.getContext('2d');
    candom.width=500;
    candom.height=500;
    candom.style.background='#eee';

    // var trimg= new Image();
    //     trimg.src= 'images/111.png';
    var trimg = document.getElementById('img');
    console.time('img');
    trimg.onload=function () {
        console.timeEnd('img');
        var pattern = can2d.createPattern(trimg, 'repeat');
        can2d.beginPath();
        can2d.rect(0,0, 300,300);
        can2d.fillStyle=pattern;
        can2d.fill();


        can2d.beginPath();
        can2d.rect(100,100, 300,300);
        can2d.fillStyle=pattern;
        can2d.strokeStyle='red';
        can2d.lineWidth=5;
        can2d.stroke();
        can2d.fill();
    };

</script>
</body>
</html>